function tmedio(fecha,oTipo,oGlobal, oModo) {

    //GUnload();
    //killAll();
	//Primero tomariamos el elemento DOM para crear un div mediante update en el que insertaremos la grafica
    //Ext.get('').update('<center><img alt="cargando" align="middle" src="images/ajax-loader.gif"/></center>',false);

    
    /*la llamada a pinta debera tener como parametros el tipo de grafica
    que desamos (horas del día, días de la semana o del mes), si queremos
    la media global de las plazas o individual de cada una y la fecha a
    a partir de la cual queremos las estadisitcas*/
    
    
    //var oGlobal= '1'; //vale 1 si queremos saber tmedioservicio plazas libres, vale 0 si queremos saber tmedio ocupadas
    //var oTipo= 'dia';
    //var oModo='1';
    //var fecha='2009-02-01';
    var hora=' 00:01';
    var urla='http://localhost/web/php/tiempoServicio.php?opt='+oTipo+'&fecha='+fecha+hora+'&modo='+oModo+'&global='+oGlobal;
    Ext.Ajax.request({
       url: urla ,
       success: function(respuesta){    
        pinta(respuesta,oGlobal,oTipo,fecha);
       }
       //failure: errorAjax
    });
}

function opcionesPlot(leyenda,color,barwidth,xopt,yopt){
            return {bars: { show:true,fill: true, barWidth:barwidth,align:"left"},
                    colors: [color],
                    legend: { show: true,container: $(leyenda) },
                    xaxis: xopt,
                    yaxis: yopt};
}

function modo(opcmodo){
    if (opcmodo==1)
        return 'Tiempo medio Ocupado';
    else
        return 'Tiempo medio Libre';
}
function pinta(respuesta,oGlobal,oTipo,fecha) {

    var d0=Ext.util.JSON.decode(respuesta.responseText);
    var d1=[];
    var d1aux=[];
    var d2=[];
    var d2aux=[];
    var d3=[];
    var d3aux=[];
    var d4=[];
    var d4aux=[];
    var d5=[];
    var d5aux=[];
    var fi=d0[0].FECHA;
    var subcontent=Ext.get('subcontenido');
    ////alert(fi.toUTCString());
    //   var fi=d1[0].TIEMPO;
    //	fiUTC=new Date(fi);
    //	var mes=fiUTC.getMonth();
    //	mes=new Number(mes)+1;
    //    var fecha=fiUTC.getDate()+'-'+mes+'-'+fiUTC.getFullYear();
    //    alert (fiUTC);
    var xaxisopt;
    var yaxisopt;
    var barwidth;
    switch (oTipo){
        case 'dia':
            xaxisopt={mode:"time",
                    timeformat:"%H:%M ",
                    tickSize:[2,"hour"],
                    //autoscaleMargin:0.02,
                    minTickSize: [1, "hour"],
                    min:fi,
                    //max:fi+(60*60*24*1000)
                    };
            yaxisopt={mode:"time",
                      timeformat:"%M ",
                      tickSize:[5,"minute"],
                      //autoscaleMargin:0.02,
                      //
                      min:0,
                      max:60*60*1000
                      };
            barwidth= 60*60*1000;
            break;
        case 'semana':
            xaxisopt={mode:"time",
                    timeformat:"%d/%m/%y",
                    tickSize:[1,"day"],
                    //autoscaleMargin:0.02,
                    min:fi,
                    //max:fi+(60*60*24*7*1000)
                    };
            yaxisopt={mode:"time",
                      timeformat:"%H:%M ",
                      tickSize:[60,"minute"],
                      //autoscaleMargin:0.02,
                      //
                      min:0,
                      //max:24*60*60*1000
                      };
            barwidth= 24*60*60*1000;
            break;
        case 'mes':
            xaxisopt={mode:"time",
                    timeformat:"%d/%m",
                    tickSize:[2,"day"],
                    //autoscaleMargin:0.02,
                    min:fi,
                    //max:fi+(60*60*24*31*1000)
                    };
            yaxisopt={mode:"time",
                      timeformat:"%H:%M ",
                      tickSize:[60,"minute"],
                      //autoscaleMargin:0.02,
                      //
                      min:0,
                      max:24*60*60*1000
                      };
            barwidth= 24*60*60*1000;
            break;
        default:
            break;
        
    }
    
    if (oGlobal==1){
        for (var i=0;i<d0.length;i++){
            d1.push([d0[i].FECHA,d0[i].TIEMPOSERV]);
            var fi=d0[i].FECHA;
            fi-=60*60*1000;
            fecha=new Date(fi);
            //fecha=fiUTC.getDate()+'/'+mes+'/'+fiUTC.getFullYear()+' '+fiUTC.getHours()+':'+fiUTC.getMinutes();
            //alert(fecha);
            d1aux.push([fecha,d0[i].OCUPACION]);
            //alert ('i vale:  ' +i+'  '+d1[i][0]+'  '+d1[i][1]);
        }
        datos=[{label:"Plazas",data:d1}];
        subcontent.update('<div id="fila1" style="width: 1150px;height:300px">'+
                                    '<div id="grafica1" style="float:left;width:625px;height:350px">'+
                                         '<div id="placeholder1" style="float:left;width:500px;height:300px"></div>'+
                                         '<div id="leyenda1" style="float:right;width:100px;height:50px"></div>'+
                                    '</div>'+
                                    '<div id="tabla1" style="float:right;width:500px;height:350px">'+
                                    '</div>'+
                          '</div>',false);
        datos=[{label:"Parking",data:d1}];
        // create the data store
        var store = new Ext.data.SimpleStore({
            fields: [
               {name: 'fecha', type: 'date', dateFormat: 'd/m/Y H:i:s'},
               {name: 'tmedio', type: 'float'}
            ]
        });
        
        store.loadData(d1aux);
        //function ocup(val){
        //    if(val <0.8){
        //        return '<span style="color:green;">' + val + '</span>';
        //    }else{
        //        return '<span style="color:red;">' + val + '</span>';
        //    }
        //    return val;
        //}


        // create the Grid
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
                {id:'fecha',header: "Fecha", width: 150, sortable: true, renderer: Ext.util.Format.dateRenderer('j/n/Y H:i:s'), dataIndex: 'fecha'},
                {header: "Tiempo medio plaza"+modo(oModo), width: 150, sortable: true, dataIndex: 'tmedio'},
              
            ],
            stripeRows: true,
            height:300,
            width:300,
            title:'Tabla'
        });

        grid.render('tabla1');
        $.plot($("#placeholder1"), datos,opcionesPlot("#leyenda1","#0000cc",barwidth,xaxisopt,yaxisopt));
        
    }else{

        for (var i=0;i<d0.length;i++){
            switch (i%5)
            {
                case 0:
                        d1.push([d0[i].FECHA,d0[i].TIEMPOSERV]);
                        var fi=d0[i].FECHA;
                        fi-=60*60*1000;
                        fecha=new Date(fi);
                        d1aux.push([fecha,d0[i].TIEMPOSERV]);
                        //alert ('PLAZA 1,  i vale:  ' +i+'  '+d1[i][0]+'  '+d1[i][1]);
                        break;
                case 1:
                        d2.push([d0[i].FECHA,d0[i].TIEMPOSERV]);
                        var fi=d0[i].FECHA;
                        fi-=60*60*1000;
                        fecha=new Date(fi);
                        d2aux.push([fecha,d0[i].TIEMPOSERV]);
                        //alert ('PLAZA 2,  i vale:  ' +i+'  '+d2[i][0]+'  '+d2[i][1]);    
                        break;
                case 2:
                        d3.push([d0[i].FECHA,d0[i].TIEMPOSERV]);
                        var fi=d0[i].FECHA;
                        fi-=60*60*1000;
                        fecha=new Date(fi);
                        d3aux.push([fecha,d0[i].TIEMPOSERV]);
                        //alert ('PLAZA 3,  i vale:  ' +i+'  '+d3[i][0]+'  '+d3[i][1]);    
                        break;
                case 3:
                        d4.push([d0[i].FECHA,d0[i].TIEMPOSERV]);
                        var fi=d0[i].FECHA;
                        fi-=60*60*1000;
                        fecha=new Date(fi);
                        d4aux.push([fecha,d0[i].TIEMPOSERV]);
                        //alert ('PLAZA 4,  i vale:  ' +i+'  '+d4[i][0]+'  '+d4[i][1]);    
                        break;
                case 4:
                        d5.push([d0[i].FECHA,d0[i].TIEMPOSERV]);
                        var fi=d0[i].FECHA;
                        fi-=60*60*1000;
                        fecha=new Date(fi);
                        d5aux.push([fecha,d0[i].TIEMPOSERV]);
                        //alert ('PLAZA 5,  i vale:  ' +i+'  '+d5[i][0]+'  '+d5[i][1]);    
                        break;
                default:
                        break;
            }
            //alert ('i vale:  ' +i+'  '+d2[i][0]+'  '+d2[i][1]);
        }
       // datos1=[{label:"plaza 1",data:d1},{label:"plaza 2",data:d2},{label:"plaza 3",data:d3},
       //{label:"plaza 4",data:d4},{label:"plaza 5",data:d5}];
       
       
       
        datos1=[{label:"Plaza 1",data:d1}];
        datos2=[{label:"Plaza 2",data:d2}];
        datos3=[{label:"Plaza 3",data:d3}];
        datos4=[{label:"Plaza 4",data:d4}];
        datos5=[{label:"Plaza 5",data:d5}];
        
        subcontent.update('<div id="fila1" style="width: 1150px;height:300px">'+
                                    '<div id="grafica1" style="float:left;width:625px;height:350px">'+
                                         '<div id="placeholder1" style="float:left;width:500px;height:300px"></div>'+
                                         '<div id="leyenda1" style="float:right;width:100px;height:50px"></div>'+
                                    '</div>'+
                                    '<div id="tabla1" style="float:right;width:500px;height:350px">'+
                                    '</div>'+
                          '</div>'+
                          '<div id="fila2" style="width: 1150px;height:300px">'+
                                    '<div id="grafica2" style="float:left;width:625px;height:350px">'+
                                         '<div id="placeholder2" style="float:left;width:500px;height:300px"></div>'+
                                         '<div id="leyenda2" style="float:right;width:100px;height:50px"></div>'+
                                    '</div>'+
                                    '<div id="tabla2" style="float:right;width:500px;height:350px">'+
                                    '</div>'+
                          '</div>'+
                          '<div id="fila3" style="width: 1150px;height:300px">'+
                                    '<div id="grafica3" style="float:left;width:625px;height:350px">'+
                                         '<div id="placeholder3" style="float:left;width:500px;height:300px"></div>'+
                                         '<div id="leyenda3" style="float:right;width:100px;height:50px"></div>'+
                                    '</div>'+
                                    '<div id="tabla3" style="float:right;width:500px;height:350px">'+
                                    '</div>'+
                          '</div>'+
                          '<div id="fila41" style="width: 1150px;height:300px">'+
                                    '<div id="grafica4" style="float:left;width:625px;height:350px">'+
                                         '<div id="placeholder4" style="float:left;width:500px;height:300px"></div>'+
                                         '<div id="leyenda4" style="float:right;width:100px;height:50px"></div>'+
                                    '</div>'+
                                    '<div id="tabla4" style="float:right;width:500px;height:350px">'+
                                    '</div>'+
                          '</div>'+
                          '<div id="fila1" style="width: 1150px;height:300px">'+
                                    '<div id="grafica5" style="float:left;width:625px;height:350px">'+
                                         '<div id="placeholder5" style="float:left;width:500px;height:300px"></div>'+
                                         '<div id="leyenda5" style="float:right;width:100px;height:50px"></div>'+
                                    '</div>'+
                                    '<div id="tabla5" style="float:right;width:500px;height:350px">'+
                                    '</div>'+
                          '</div>',false);
        
        // create the data store
        var store = new Ext.data.SimpleStore({
            fields: [
               {name: 'fecha', type: 'date', dateFormat: 'd/m/Y H:i:s'},
               {name: 'tmedio', type: 'float'}
            ]
        });

        //function ocup(val){
        //    if(val <0.8){
        //        return '<span style="color:green;">' + val + '</span>';
        //    }else{
        //        return '<span style="color:red;">' + val + '</span>';
        //    }
        //    return val;
        //}
        
        // create the Grid
        store.loadData(d1aux);
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
                {id:'fecha',header: "Fecha", width: 150, sortable: true, renderer: Ext.util.Format.dateRenderer('j/n/Y H:i:s'), dataIndex: 'fecha'},
                {header: "Tiempo medio plaza"+modo(oModo), width: 150, sortable: true, dataIndex: 'tmedio'},
              
            ],
            stripeRows: true,
            height:300,
            width:300,
            title:'Tabla PLAZA 1'
        });
        grid.render('tabla1');
        
        // create the Grid
        store.loadData(d2aux);
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
                {id:'fecha',header: "Fecha", width: 150, sortable: true, renderer: Ext.util.Format.dateRenderer('j/n/Y H:i:s'), dataIndex: 'fecha'},
                {header: "Tiempo medio plaza"+modo(oModo), width: 150, sortable: true, dataIndex: 'tmedio'},
              
            ],
            stripeRows: true,
            height:300,
            width:300,
            title:'Tabla PLAZA 2'
        });
        grid.render('tabla2');
        
                // create the Grid
        store.loadData(d3aux);
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
                {id:'fecha',header: "Fecha", width: 150, sortable: true, renderer: Ext.util.Format.dateRenderer('j/n/Y H:i:s'), dataIndex: 'fecha'},
                {header: "Tiempo medio plaza"+modo(oModo), width: 150, sortable: true, dataIndex: 'tmedio'},
              
            ],
            stripeRows: true,
            height:300,
            width:300,
            title:'Tabla PLAZA 3'
        });
        grid.render('tabla3');
        
        // create the Grid
        store.loadData(d4aux);
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
                {id:'fecha',header: "Fecha", width: 150, sortable: true, renderer: Ext.util.Format.dateRenderer('j/n/Y H:i:s'), dataIndex: 'fecha'},
                {header: "Tiempo medio plaza"+modo(oModo), width: 150, sortable: true, dataIndex: 'tmedio'},
              
            ],
            stripeRows: true,
            height:300,
            width:300,
            title:'Tabla PLAZA 4'
        });
        grid.render('tabla4');

        // create the Grid
        store.loadData(d5aux);
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
                {id:'fecha',header: "Fecha", width: 150, sortable: true, renderer: Ext.util.Format.dateRenderer('j/n/Y H:i:s'), dataIndex: 'fecha'},
                {header: "Tiempo medio plaza"+modo(oModo), width: 150, sortable: true, dataIndex: 'tmedio'},
              
            ],
            stripeRows: true,
            height:300,
            width:300,
            title:'Tabla PLAZA 5'
        });
        grid.render('tabla5');
        
     	$.plot($("#placeholder1"), datos1,opcionesPlot("#leyenda1","#0000cc",barwidth,xaxisopt,yaxisopt));
        $.plot($("#placeholder2"), datos2,opcionesPlot("#leyenda2","#cc0000",barwidth,xaxisopt,yaxisopt));
        $.plot($("#placeholder3"), datos3,opcionesPlot("#leyenda3","#ffff33",barwidth,xaxisopt,yaxisopt));
        $.plot($("#placeholder4"), datos4,opcionesPlot("#leyenda4","#66cc99",barwidth,xaxisopt,yaxisopt));
        $.plot($("#placeholder5"), datos5,opcionesPlot("#leyenda5","#ff9900",barwidth,xaxisopt,yaxisopt));
    }
};